<template>
  <TUIGroupManage class="setting"  :conversation="conversation" :userInfo="userInfo" />
</template>
<script lang="ts">
import TUIGroupManage from "./manage-components/manage.vue";
import { defineComponent, reactive, toRefs, computed } from 'vue';
import { onUnload } from "@dcloudio/uni-app";
import {  TUIGroupServer } from '../../TUICore/server'
import { imStore as imStore1 } from "@/store/imStore";


const TUIConversation = defineComponent({
  name: "TUIConversation",
  components: {
    TUIGroupManage,
  },

  setup(props) {
    const imStore = imStore1();
    uni.$TUIKit.TUIGroupServer = new TUIGroupServer();
    const data: any = reactive({
      conversation: computed(() => imStore.conversation),
      userInfo: {
        isGroup: false,
        list: [],
      },
    });
    onUnload(() => {
     uni.$TUIKit.TUIGroupServer.destroyed();
    });
    return {
      ...toRefs(data),
    };
  },
});
export default TUIConversation;
</script>

<style lang="scss" scoped>
.title-container {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 34px 0px 0px;
  font-size: 17px;
}

.icon-container {
  width: 66px;
  display: flex;
  justify-content: center;
  padding: 34px 0 0 0;

  .add-icon-image {
    width: 24px;
    height: 24px;
  }

  &.right-icon-container {
    position: relative;
    left: 20px;
  }
}

.chat-container {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  color: #444444;

  .item-icon {
    display: inline-block;
    width: 21px;
    height: 21px;
    margin-right: 12px;
  }
}
</style>
